<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="个人中心" :border-bottom="false"></fa-navbar>
		<!-- 会员中心 -->
		<view class="home bgClolr " :class="{'u-p-t-30 u-p-b-20': vuex_token}">
			<image src="../../static/images/notLoggedIn1.jpg" mode="" class="image1" v-if="!vuex_token"></image>
			<image src="../../static/images/notLoggedIn2.jpg" mode="" class="image2" v-if="!vuex_token"></image>
			<view class="text" v-if="!vuex_token">
				<view class="">
					服务榕商
				</view>
				<view class="">
					建设榕城
				</view>
			</view>
			<!-- <view class="u-p-t-30 u-p-b-50 home"> -->
			<view class="userinfo"  :class="{'padding': vuex_token}" style="height: '225rpx'">
				<block v-if="vuex_token">
					<u-avatar size="114" :show-level="vuex_user.vip > 0" :src="vuex_user.avatar" @click="chooseAvatar">
					</u-avatar>
					<!-- <view class="u-skeleton-fillet u-m-t-15 u-p-l-80 u-p-r-80 u-line-1">{{ vuex_user.nickname || '' }}</view> -->
					<!-- <view class="u-m-t-15" v-if="!vuex_user.vip > 0">
						<u-tag
							type="success"
							:text="vuex_user.vipInfo && vuex_user.vipInfo.name ? vuex_user.vipInfo.name : ''"
							mode="light"
							shape="circle"
							size="mini"
						/>
					</view> -->

					<!-- <view class="u-skeleton-fillet u-m-t-15 u-p-l-80 u-p-r-80 u-line-2"> -->
					<view class="u-skeleton-fillet  u-line-2 userInfo_info">
						<view class="userInfo_info_left">
							<view class="userInfo_name">
								<view class="">
									{{vuex_user.nickname}}
								</view>
								<!-- <view class="userInfo_info_right" v-if="vuex_user.group_name"> -->
								<view class="userInfo_info_right" v-if="vuex_user.group_name">
									{{vuex_user.group_name}}
									<!-- 党组书记、副主席 -->
								</view>
							</view>
							<view class="userInfo_company" style="color: #f7adb6;">
								<view class="" v-if="vuex_user.duty">
									<!-- 董事长兼总经理 -->
									{{vuex_user.duty}}
								</view>
								<view class="" v-if="vuex_user.company">
									<!-- 福建国通星驿网络科技有限公司常务副总经理 -->
									{{vuex_user.company}}
								</view>
							</view>
						</view>
						<!-- <view class="userInfo_info_right" style="display: none"> -->
						<!-- <view class="userInfo_info_right">
						</view> -->
					</view>
				</block>
				<block v-else>
					<!-- <u-avatar size="120" src="0"></u-avatar> -->
					<!-- <view class="u-m-t-30 "><u-button hover-class="none" class="custom-style" @click="goPage('/pages/login/mobilelogin')">立即登录</u-button></view> -->
					<view class="u-m-t-30  login_btn"><button class='btn' plain type="default"
							@click="goPage('/pages/login/wxlogin')">立即登录</button></view>

				</block>
			</view>
			<view class="corrugated" v-if="$u.http.config.baseUrl">
				<view class="wave-top wave-item"
					:style="[{ backgroundImage: 'url(' + wavetop + ')', height: vuex_user.vip > 0 ? '230rpx' : '200rpx' }]">
				</view>
				<view class="wave-middle wave-item"
					:style="[{ backgroundImage: 'url(' + wavemiddle + ')', height: vuex_user.vip > 0 ? '230rpx' : '200rpx' }]">
				</view>
				<view class="wave-bottom wave-item"
					:style="[{ backgroundImage: 'url(' + wavebottom + ')', height: vuex_user.vip > 0 ? '230rpx' : '200rpx' }]">
				</view>
			</view>
		</view>
		<!-- 统计 -->

		<!-- <view class="u-flex u-text-center u-p-l-30 u-p-r-30 u-p-t-50 u-p-b-50 u-bg-white">
			<view class="u-flex-4" @click="goPage('/pages/my/moneylog', true)">
				<view class="u-text-weight u-font-28">
					￥
					<text v-text="vuex_user.money || 0"></text>
				</view>
				<view class="u-m-t-20">余额</view>
			</view>
			<view class="u-flex-4 u-border-left u-border-right" @click="goPage('/pages/my/scorelog', true)">
				<view class="u-text-weight u-font-28"><text v-text="vuex_user.score || 0"></text></view>
				<view class="u-m-t-20">积分</view>
			</view>
			<view class="u-flex-4">
				<view class="u-text-weight u-font-28">
					Lv.
					<text v-text="vuex_user.level || 0"></text>
				</view>
				<view class="u-m-t-20">等级</view>
			</view>

		</view> -->
		<!-- 导航 -->
		<!-- <view class="u-m-t-30"> -->
		<!-- <u-cell-group>
			</u-cell-group>
		</view>
			</u-cell-group> -->
		<view class="myPage" v-for="(item,index) in MyPageArr" :key='index' @click="goPage(item.url,item.show)">
			<view class="myImg">
				<u-image width="100rpx" border-radius="6" height="100rpx" :src="item.img"></u-image>
			</view>
			<view class="myPage_list">
				<view class="myPage_list_item">
					<view class="u-font-32">
						{{item.title}}
					</view>
					<view class="">
						{{item.bable}}
					</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view>

		</view>

		<!-- <view class="shadow" v-if="isShow"></view> -->
		<!-- <view class="popup" >
			<view class="popup_img">
				<u-image :src="img" mode="" width="100rpx" height="100rpx"></u-image>
			</view>
			<view class="sign_suc">
				<view class="sign_suc_txt">
					通知订阅
				</view>
				订阅系统通知，可及时收到会议活动通知信息
			</view>
			<view class="cancel" @click="order">
				订阅
			</view>
		</view> -->
		<view class="popup" v-if="showImage">
			<view class="popup_text">
				请关注公众号
			</view>
			<view class="imageCenter">
				<u-image :src="imgArr" mode="" width="230rpx" height="230rpx"></u-image>
			</view>
			<view class="sign_suc img">
				长按识别二维码
			</view>
			<view class="close" @click="close">
				关闭
			</view>
		</view>
		<u-popup v-model="show" mode="center" width="520rpx" height="520rpx" border-radius="20">
			<view class="image">
				<image src="/static/images/success.jpg" mode=""
					style="width: 250rpx;height: 160rpx;border-radius: 50%;margin-left: 142rpx; margin-top: 30rpx;">
				</image>
				<view class="" style="font-size: 34rpx;color: #666;text-align: center;margin-top: 20rpx;">
					审核结果反馈
				</view>
				<view class="" style="font-size: 26rpx;margin-top: 20rpx;width:420rpx;margin: 20rpx auto;">
					{{detail.name}}申请的审核编号为{{detail.code}}的直属会员申请已经审核通过。
				</view>
				<view class="" @click='goDetail'
					style="	width: 248rpx;height: 74rpx;background-color: #d9001b;border-radius: 37rpx;text-align: center;line-height: 74rpx;color: #fff;margin: 30rpx auto;">
					查看详情
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show1" mode="center" width="520rpx" height="520rpx" border-radius="20">
			<view class="image">
				<image src="/static/images/error.jpg" mode=""
					style="width: 250rpx;height: 160rpx;border-radius: 50%;margin-left: 142rpx; margin-top: 30rpx;">
				</image>
				<view class="" style="font-size: 34rpx;color: #666;text-align: center;margin-top: 20rpx;">
					审核结果反馈
				</view>
				<view class="" style="font-size: 26rpx;margin-top: 20rpx;width:420rpx;margin: 20rpx auto;">
					{{detail.name}}申请的审核编号为{{detail.code}}的直属会员申请审核未通过。
				</view>
				<view class="" @click='goDetail'
					style="	width: 248rpx;height: 74rpx;background-color: #d9001b;border-radius: 37rpx;text-align: center;line-height: 74rpx;color: #fff;margin: 30rpx auto;">
					查看详情
				</view>
			</view>
		</u-popup>
		<!-- </view>
		<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
		 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	import {
		avatar
	} from '@/common/fa.mixin.js';
	export default {
		mixins: [avatar],
		computed: {
			wavetop() {
				return this.$u.http.config.baseUrl + '/assets/addons/cms/img/wave-top.png';
			},
			wavemiddle() {
				return this.$u.http.config.baseUrl + '/assets/addons/cms/img/wave-mid.png';
			},
			wavebottom() {
				return this.$u.http.config.baseUrl + '/assets/addons/cms/img/wave-bot.png';
			},
			isBind() {
				return false;
			}
		},
		onShow() {
			// console.log(this.vuex_config.member_amount,'vuex_config123');
			if (this.vuex_token) {
				this.getUserIndex();
				this.getMenu()
			} else {
				this.$u.vuex('vuex_user', {});
			}
			//移除事件监听
			uni.$off('uAvatarCropper', this.upload);
			this.getAuditing()
		},
		data() {
			return {
				// notice: false,
				detail:{},
				isShow: false,
				show: false,
				show1:false,
				showImage: false,
				img: this.$image_url + "/uploads/uniapp/image/tishi.png",
				imgArr: this.$image_url + "/uploads/uniapp/image/qr.png",

				// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				form: {
					avatar: ''
				},
				// show: false,
				customStyle: {
					height: '280rpx',
					colot: '#d9001b'
				},
				MyPageArr: [
					// {
					// 	img: this.$image_url + "/uploads/uniapp/image/mySign.png",
					// 	title: '我的报名',
					// 	bable: 'My Registration',
					// 	url: '/pages/my/signup',
					// 	show: true
					// },
					// {
					// 	img: this.$image_url + '/uploads/uniapp/image/myDuty.png',
					// 	title: '我的履职',
					// 	bable: 'My performance of duty',
					// 	url: '/pages/my/member',
					// 	show: 'dev'
					// },
					// {
					// 	img: this.$image_url + '/uploads/uniapp/image/card.png',
					// 	title: '我的名片',
					// 	bable: 'My Business Card',
					// 	url: '/pages/index/card',
					// 	show: true
					// },
					// {
					// 	img: this.$image_url + '/uploads/uniapp/image/mylist.png',
					// 	title: '我的通讯录',
					// 	bable: 'My Address Book',
					// 	url: '/pages/my/mailList',
					// 	show: 'mail'
					// },
					// {
					// 	img: this.$image_url + '/uploads/uniapp/image/membership.png',
					// 	title: '入会申请',
					// 	bable: 'Apply For Membership',
					// 	url: '/pages/my/membership',
					// },
					// {
					// 	img: this.$image_url + '/uploads/uniapp/image/servers.png',
					// 	title: '联系我们',
					// 	bable: 'Contact Customer Service',
					// 	url: '/pages/my/collection',
					// },
					// {
					// 	img: this.$image_url + '/uploads/uniapp/image/aboutUs.png',
					// 	title: '关于我们',
					// 	bable: 'About Us',
					// 	url: '/pages/my/aboutus',
					// }
				]
			};
		},
		methods: {
			async getMenu (){
				let res = await this.$api.getMenu();
				this.MyPageArr = res.data.urls
			},
			goDetail(){
				this.$u.route('/pages/applicationForm/auditing');
			},
			async getAuditing() {
				if(this.vuex_token) {
					let res = await this.$api.getAuditing();
					if (!res.code) {
						this.$u.toast(res.msg);
						return;
					}
					console.log(res,'res');
					if(res.data.row.audit_status == 1 && res.data.row.is_read == 0) {
						this.show = true
					}else if(res.data.row.audit_status == 2 && res.data.row.is_read == 0){
						this.show1 = true
					}
					this.detail = res.data.row
				}
				
				
			},
			order: async function() {

				var that = this;

				uni.requestSubscribeMessage({
					tmplIds: ['YXd57l651Ck4m1S2FvN6t-4LiBs7G9qHzwWyOWJ1r1M'],
					success(res) {

						if (res['YXd57l651Ck4m1S2FvN6t-4LiBs7G9qHzwWyOWJ1r1M'] == 'accept') {

							that.$api.messageOrder();

							// that.notice = false;
							that.showImage = true;
						}

					}
				})
			},
			// 关闭公众号图片弹窗
			close() {
				this.showImage = false
				this.isShow = false

			},
			getUserIndex: async function() {
				let res = await this.$api.getUserIndex();
				uni.stopPullDownRefresh();
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				this.$u.vuex('vuex_user', res.data.userInfo || {});

				if (res.data.userInfo.is_order == 0) {

					// this.notice = true;
					this.isShow = true

				}
				// if (res.data.userInfo.group_id == 0) {
				// 	this.MyPageArr = [{
				// 			img: this.$image_url + "/uploads/uniapp/image/mySign.png",
				// 			title: '我的报名',
				// 			bable: 'My Registration',
				// 			url: '/pages/my/signup',
				// 			show: true
				// 		},
				// 		{
				// 			img: this.$image_url + '/uploads/uniapp/image/myDuty.png',
				// 			title: '我的履职',
				// 			bable: 'My Performance',
				// 			url: '/pages/my/member',
				// 			show: 'dev'
				// 		},
				// 		{
				// 			img: this.$image_url + '/uploads/uniapp/image/card.png',
				// 			title: '我的名片',
				// 			bable: 'My Business Card',
				// 			url: '/pages/index/card',
				// 			show: true
				// 		},
				// 		{
				// 			img: this.$image_url + '/uploads/uniapp/image/mylist.png',
				// 			title: '我的通讯录',
				// 			bable: 'My Address Book',
				// 			url: '/pages/my/mailList',
				// 			show: 'mail'
				// 		},
				// 		{
				// 			img: this.$image_url + '/uploads/uniapp/image/membership.png',
				// 			title: '入会申请',
				// 			bable: 'Apply For Membership',
				// 			url: '/pages/my/membership',
				// 		},
				// 		{
				// 			img: this.$image_url + '/uploads/uniapp/image/servers.png',
				// 			title: '联系我们',
				// 			bable: 'Contact Customer Service',
				// 			url: '/pages/my/collection',
				// 		},
				// 		{
				// 			img: this.$image_url + '/uploads/uniapp/image/aboutUs.png',
				// 			title: '关于我们',
				// 			bable: 'About Us',
				// 			url: '/pages/my/aboutus',
				// 		}
				// 	]

				// }
			},
			goPage: async function(path, auth) {
				console.log(auth, 'auth', path, 'path');
				if (auth && !this.vuex_token) {
					this.$u.toast('请先登录再操作！');
					return;
				}
				if (path == '/pages/my/collection') {
					let phone = this.vuex_config.contact_us
					uni.makePhoneCall({
						phoneNumber: phone,
						success: function() {
							console.log('拨打电话成功')
						},
						fail() {
							console.log('打电话失败了')
						}
					})
					return
				}
				if (auth == 'card') {
					path = path + '?id=' + this.vuex_user.id
					this.$u.route(path);
					return
				}
				if (auth == 'mail') {
					path = path + '?id=' + this.vuex_user.id
					this.$u.route(path);
					return
				}
				if (path == 'out') {
					console.log(11111111111111111111111111111)
					let res = await this.$api.goUserLogout();
					if (!res.code) {
						this.$u.toast(res.msg);
						return;
					}
					//退出成功
					this.$u.vuex('vuex_user', {
						avatar: ''
					}); //清除vuex_user
					this.$u.vuex('vuex_token', ''); //清除用户token
					return;
				}
				if (auth == 'tel') {
					uni.makePhoneCall({
						phoneNumber: '059187621969' //仅为示例
					});
					return;
				}
				if (auth == 'dev') {
					this.$u.toast('正在开发中，敬请期待！');
					return
				}
				if (path == '/pages/my/member' && !this.vuex_user.is_install_vip) {
					this.$refs.uTips.show({
						title: '请先安装VIP会员插件或启用该插件',
						type: 'error',
						duration: '3000'
					});

					return;
				}
				if (path == '/pages/signin/signin' && !this.vuex_user.is_install_signin) {
					this.$refs.uTips.show({
						title: '请先安装会员签到插件插件或启用该插件',
						type: 'error',
						duration: '3000'
					});

					return;
				}
				if (path == '/pages/index/card') {
					path = path + '?id=' + this.vuex_user.id
					this.$u.route(path);
					return
				}

				this.$u.route(path);
			},
			editAvatar: async function() {
				let res = await this.$api.goUserAvatar({
					avatar: this.form.avatar
				});
				this.getUserIndex();
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			if (this.vuex_token) {
				this.getUserIndex();
			} else {
				uni.stopPullDownRefresh();
				this.$u.toast('请先登录');
				this.$u.vuex('vuex_user', {});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f4f6f8;
	}

	.home {
		position: relative;
		width: 100%;

		.image1 {
			width: 100%;
			height: 100vh;
		}

		.image2 {
			width: 185rpx;
			height: 185rpx;
			position: absolute;
			left: 280rpx;
			top: 110rpx;
		}

		.text {
			font-size: 35rpx;
			color: #ffffff;
			position: absolute;
			left: 300rpx;
			top: 375rpx;
		}
		.padding {
			padding: 30rpx 20rpx;
		}
		.userinfo {
			display: flex;
			justify-content: space-between;
			// flex-direction: column;
			// align-items: center;
			
			z-index: 100;

			.u-skeleton-fillet {
				color: #ffffff;
				width: 100vw;
				// text-align: center;
			}

			.userInfo_info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-left: 20rpx;

				.userInfo_info_left {
					display: flex;
					flex: 1;
					height: 100%;
					flex-direction: column;
					justify-content: space-around;

					// padding: 0 20rpx;
					// align-items: center;
					.userInfo_name {
						height: 50rpx;
						line-height: 50rpx;
						font-size: 34rpx;
						display: flex;

						justify-content: space-between;
						align-items: center;
					}

					.userInfo_company {
						word-wrap: break-word;
						word-break: normal;
						font-size: 27rpx;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						/* 这里是超出几行省略 */
						overflow: hidden;
						padding-right: 50rpx;
					}
				}

				.userInfo_info_right {
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					border-radius: 10rpx;
					margin-left: 20rpx;
					font-size: 30rpx;
					padding: 0 20rpx;
					// background-color: #ffd665;
					background-image: linear-gradient(to right, #ffd665, #ff9727);
				}
			}

		}

		.corrugated {
			bottom: -2rpx;
			left: 0;
			position: absolute;
			width: 100%;
			height: 50%;
			overflow: hidden;
			z-index: 0;

			.wave-item {
				position: absolute;
				width: 200%;
				left: 0;
				background-repeat: repeat no-repeat;
				background-position: 0 bottom;
				transform-origin: center bottom;
			}

			.wave-top {
				opacity: 0.5;
				animation: wave-animation 3s;
				animation-delay: 1s;
				background-size: 50% 60rpx;
				z-index: 15;
			}

			.wave-middle {
				opacity: 0.75;
				animation: wavemove 10s linear infinite;
				background-size: 50% 80rpx;
				z-index: 10;
			}

			.wave-bottom {
				animation: wavemove 15s linear infinite;
				background-size: 50% 45rpx;
				z-index: 5;
			}
		}

		.login_btn {
			height: 79rpx;
			display: inline-block;
			margin: auto;
			position: absolute;
			top: 572rpx;
			left: 94rpx;

			.btn {
				width: 564rpx;
				height: 79rpx;
				line-height: 79rpx;
				background-color: #ffffff;
				border-radius: 10rpx;
				border: solid 2rpx #ffffff;
				font-size: 34rpx;
				color: #d9001b;
			}
		}

	}

	.myPage {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0 50rpx;
		background-color: #ebf1fb;
		margin-top: 20rpx;

		.myPage_list {
			display: flex;
			height: 100rpx;
			flex: 1;
			justify-content: space-between;
			margin-left: 20rpx;
		}

		.myPage_list_item {
			display: flex;
			justify-content: space-around;
			flex-direction: column;
		}
	}

	.bgClolr {
		background-color: #d9001b;
	}

	@keyframes wavemove {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1);
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(0.55);
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1);
		}
	}

	.shadow {
		width: 100%;
		height: 100%;
		background-color: #999999;
		opacity: 0.5;
		z-index: 100;
		position: fixed;
		top: 0;
		left: 0;
		border-radius: 10px;
		box-sizing: border-box;
	}

	.popup_img image {
		width: 40rpx;
	}

	.popup {
		z-index: 900;
		width: 70%;
		height: 450rpx;
		background-color: white;
		border-radius: 30rpx;
		color: black;
		position: absolute;
		left: 50%;
		top: 30%;
		margin-left: -35%;
		padding-bottom: 30rpx;

		.close {
			position: absolute;
			font-size: 28rpx;
			color: #C0C0C0;
			right: 20rpx;
			top: 20rpx;
		}

		.popup_img {
			margin: 30rpx 0 20rpx 40%;
		}

		.imageCenter {
			width: 230rpx;
			height: 230rpx;
			margin: 30rpx auto 10rpx;
		}

		.sign_suc {
			font-size: 30rpx;
			text-align: center;
			margin-bottom: 60rpx;
			padding: 0 10rpx;

			.sign_suc_txt {
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
		}

		.img {
			margin-bottom: 20rpx;
		}

		.popup_text {
			text-align: center;
			font-size: 40rpx;
			margin-top: 30rpx;
			font-weight: bold;
		}

		.cancel {
			width: 280rpx;
			height: 80rpx;
			background-color: red;
			color: white;
			margin: 0 auto;
			text-align: center;
			line-height: 80rpx;
			border-radius: 60rpx;
		}
	}

	._br {
		font-size: 40rpx;
		margin-bottom: 20rpx;
	}
</style>